<template>
  <div class="page">
    <m-header :title="type=='buy'?langText&&langText.paycenter:langText&&langText.sellingcenter" :canback="Boolean(1)"></m-header>
    <section class="body">
      
      <div class="box" :style="'height:'+(screenHeight-60)+'px;overflow:auto;'" v-lazy-load="lazyLoad">

        <div v-if="type=='buy'">
          <div class="box-3" v-for="(item,index) in list" :key="index">
            <div class="box3_left">
              <p class="title">{{item.username}}</p>
              <p>{{langText&&langText.purchasecurrency}}：{{item.remain_amount}}</p>
              <p>{{langText&&langText.unitprice}}：${{item.uprice}}</p>
              <!-- <p>手续费：$10</p> -->
            </div>
            <div class="box3_right">
                <p>{{formDate(item.createtime)}}</p>
                <p class="title">{{langText&&langText.totalamount}}：{{Number(item.remain_amount*item.uprice).toFixed(2)}}</p>
                <button class="btn-submit btn-origin r_btn" @click="goTo(item.id)">{{langText&&langText.sellnow}}</button>
            </div>
          </div>
        </div>

        <div v-else>
          <div class="box-3" v-for="(item,index) in list" :key="index">
            <div class="box3_left box3_left_sell">
              <p class="title">{{item.username}}</p>
              <p>{{langText&&langText.quantity}}：{{item.remain_amount}}</p>
              <p>{{langText&&langText.unitprice}}：${{item.uprice}}</p>
              <!-- <p>{{langText&&langText.fee}}：{{item.fee}}</p> -->
            </div>
            <div class="box3_right">
                <p>{{formDate(item.createtime)}}</p>
                <p class="title">{{langText&&langText.totalamount}}：{{Number(item.remain_amount*item.uprice).toFixed(2)}}</p>
                <button class="btn-submit btn-origin r_btn_sell" @click="goTo(item.id)">{{langText&&langText.buynow}}</button>
            </div>
          </div>
        </div>

       
      </div>

    </section>
    <!-- <m-Footer></m-Footer> -->
    <m-load ref="load"></m-load>
    <m-pwd ref="pwd" @pay="pay"></m-pwd>

  </div>
</template>
<script>
import { Trade,Business } from '@/server/server.js';
import {Util,Load} from '@/assets/commonjs/utils.js';
import {mapGetters} from 'vuex';
import mPwd from '@/components/pwd-alert.vue';
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";
export default {
  data(){
      return {
        type:null,
        page:1,
        list:[],
        langText:null,
        allTxt:null,
        angText:null,
        noMore: false,
        screenHeight: null,
        id:null
      }
  },
  components:{
      mPwd
  },
  computed: {
    ...mapGetters(['getLangId'])
  },
  created() {
    this.initDate();
    this.allOrder();
  },
  mounted(){
    // this.buylist();
  },
  methods: {
    initDate(){
      this.type = this.$route.query.type;
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('tradingcenter')))
      this.screenHeight = window.innerHeight || window.screen.availHeight || window.screen.height;
    },
    allOrder(){
      Business.allOrder({type:this.type=='buy'?'1':'2'}).then(res=>{
        if(res.code ==1){
            this.list = this.list.concat([],res.data)
            if(res.data.length<10) this.noMore = true;
        }else return mui.toast(res.msg);
      })
    },
    lazyLoad() {
      console.log('123')
      this.page = this.page + 1;
      if (!this.noMore) {
        // this.exchangeRecord();
        this.buylist()
      }
    },
    formDate(time){
      return Util.formatDate(time);
    },
    buylist(){
      if(this.type=='buy'){
        Trade.buylist({page:this.page}).then(res=>{
          if(res.code==1){
            // this.list = res.data;
            this.list = this.list.concat([],res.data)
            if(res.data.length<10)
            this.noMore = true;
          }else{
            mui.toast(res.msg)
          }
        })
      }else{
        Trade.sellList({page:this.page}).then(res=>{
          if(res.code==1){
            // this.list = res.data;
            this.list = this.list.concat(this.list,res.data)
            if(res.data.length<10)
            this.noMore = true;
          }else{
            mui.toast(res.msg)
          }
        })
      }
    },
    goTo(id){
      this.$router.push({name:'BillDetails',query:{type:this.type,id}})
      this.id = id;
      // this.$refs['pwd'].open();
    },
    pay(pwd){
      if(this.type == 'buy'){
        Trade.addOrderBuy({id:this.id,paypwd:pwd}).then(res=>{
          // mui.toast(res.msg)
          if(res.code==1){
            this.$router.push({name:'Sell'});
          }else{
            mui.toast(res.msg)
          }
        })
      }else{
        Trade.addOrderSell({id:this.id,paypwd:pwd}).then(res=>{
          // mui.toast(res.msg)
          if(res.code==1){
            this.$router.push({name:'Buy'});
          }else{
            mui.toast(res.msg)
          }
        })
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  line-height: 36px;
  background-color: @bg-color;
  
  .box{
    padding: 0 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    .box-3{
      width:710px;
      // height:208px;
      background:rgba(255,255,255,1);
      border-radius:10px;
      margin-top: 20px;
      padding: 20px 30px;
      display: flex;
      .box3_left{
        // flex: 1;
        width: 59%;
        text-align: left;
        .title{
          font-weight: 550;
        }
        p{
          color: #000;
          margin-top: 15px;
        }
      }
      .box3_left_sell{
        p{
          margin-top: 10px;
        }
      }
      .box3_right{
        // flex: 1;
        width: 39%;
        height: 100%;
        margin-left: 20px;
        position: relative;
        text-align: right;
          p{
            // display: inline;
            margin-top: 10px;
            color: #000;
            font-size: 24px;
          }
          .title{
            font-size:28px;
            font-weight:550;
            color:rgba(78,182,173,1);
          }
          .r_btn{
            padding: 13px 27px;
            border-radius: 10px;
            // position: absolute;
            // bottom: 0;
            // right: 0;
            margin-top: 10px;
            background-color: #8498E3;
          }
          .r_btn_sell{
            padding: 13px 27px;
            border-radius: 10px;
            margin-top: 30px;
          }
      }
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>
<style lang="less">
._v-container {
  height: 300px!important;
}
._v-container>._v-content>.loading-layer .spinner-holder .spinner, ._v-container>._v-content>.pull-to-refresh-layer .spinner-holder .spinner{
    margin-top: 0!important;
    fill: white!important;
    stroke: white!important;
    z-index: 1;
}
</style>
